<template>
  <el-container>
    <el-aside style="background-color: #304156;width: 200px; position: absolute;top: 0;bottom: 0;left: 0">
      <img src="https://lutu-image-1318294981.cos.ap-shanghai.myqcloud.com/logo%2Flutu.png" width="50px" height="50px">
      <span style="color: white;position: absolute;left: 60px;top: 20px">鹿途后台管理系统</span>
      <el-menu background-color="#304156"
               router="true"
               class="el-menu-vertical-demo"
               :default-active="$router.currentRoute.path"
               text-color="white"
               default-active="2"
               active-text-color="green">
        <el-menu-item index="/">
          <i class="el-icon-menu"></i>
          <span slot="title" style="color: white">首页</span>
        </el-menu-item>
        <el-menu-item index="/admin/user" >
          <i class="el-icon-user"></i>
          用户管理</el-menu-item>
        <el-menu-item index="/admin/role" >
          <i class="el-icon-s-flag"></i>
          角色管理</el-menu-item>
        <el-submenu index="/admin/product" >
          <i class="el-icon-s-marketing"></i>
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>产品管理</span>
          </template>
            <el-menu-item index="/admin/product/routeProduct">旅游路线</el-menu-item>
            <el-menu-item index="/admin/product/hotelProduct">酒店管理</el-menu-item>
            <el-menu-item index="/admin/product/spotProduct">景点管理</el-menu-item>
        </el-submenu>

        <el-menu-item index="/admin/authority" >
          <i class="el-icon-warning"></i>
          权限管理</el-menu-item>
        <el-menu-item index="/admin/blog" >
          <i class="el-icon-picture"></i>
          文章管理</el-menu-item>
        <el-menu-item index="/admin/category" >
          <i class="el-icon-user-solid"></i>
          类别管理</el-menu-item>
        <el-menu-item index="/admin/order" >
          <i class="el-icon-user-solid"></i>
          订单管理</el-menu-item>
        <el-menu-item index="/admin/invoice" >
          <i class="el-icon-user-solid"></i>
          发票管理</el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header style="position: absolute;top: 0;bottom: 0;left: 300px;right: 0">
        <el-dropdown style="float: right">
          <template >
            <el-avatar :src="user.imgUrl" style="margin-top: 7px"></el-avatar>
          </template>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item ><el-button @click="gotoPersonal">个人中心</el-button ></el-dropdown-item>
            <el-dropdown-item ><el-button @click="logout()">退出登录</el-button ></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-input type="text"  style="width: 300px;float: right;right: 20px;margin-top: 10px" v-model="searchValue"
                  auto-complete="off" placeholder="搜索" @keydown.native.enter="search"></el-input>
      </el-header>
      <el-main style="position: absolute;top: 60px;bottom: 0;left: 200px;right: 0">
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "AdminIndex",
  components: {

  },
  data: function () {
    return {
      searchValue:"",
      user:{nickName:'',imgUrl:'',id:''}
    }
  },
  methods: {
    gotoPersonal(){
      this.$router.push('/personal?id='+this.user.id)
    },
    logout(){
      if (confirm("您确认退出登录吗?")){
        //发请求退出登录
        this.axios.post("http://localhost:8080/v1/users/logout").then(()=> {
          localStorage.clear();//清空登录成功时保存的数据
          location.href="/";
        })
      }
    },
    search(){},

    showPersonalInfo(){
      this.user.nickName = localStorage.getItem('nickName')
      this.user.imgUrl = localStorage.getItem('imgUrl')
      this.user.id = localStorage.getItem('id')
    },


  },
  mounted() {
    this.showPersonalInfo();
  }
}
</script>

<style scoped>
.aside{
  background-color: #304156;
}
.el-menu-item.is-active{
  background-color: #42b983 !important;
}
.el-menu-item{
  color: white !important;
}

</style>